import AppContainer from '@/components/AppContainer';

import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import useList from '@/hooks/useList';
import { queryCertificate, queryPipeline } from '@/service/globalSetting';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';

import React from 'react';
import SavePipeline from './components/SavePipeline';
// import SaveCertificate from './components/SaveCertificate';

const App = () => {
  let [form] = Form.useForm()
  const { tableProps, search,refresh } = useAntdList(queryPipeline, { form })
  const savePipeline = useAntdModal({refresh})
  const columns: ColumnsType<any> = [{
    title: '名称',
    dataIndex: 'title'
  },{
    title: '归属',
    dataIndex: 'belong'
  }, {
    title: '更新时间',
    dataIndex: 'updatedAt'
  }, {
    title: '创建时间',
    dataIndex: 'createdAt'
  }, {
    title: '操作',
    render(_) {
      return <Space>
        <Button type='link' onClick={() => savePipeline.openModal(_)}>编辑</Button>
      </Space>
    }
  }
  ]

  return (
    <AppContainer queryFilter={
      <QueryFilter form={form} submit={search.submit} reset={search.reset} >
        <Form.Item label="名称"> <Input /></Form.Item>
        <Form.Item label="类型"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>

      </QueryFilter>
    }
      toolbar={<Toolbar leftRender={<Button  type='primary'  icon={<PlusOutlined />} onClick={() => savePipeline.openModal()}>创建流水线</Button>} />}
    >
      <SavePipeline {...savePipeline} />

      <Table
        rowKey="id"
        columns={columns}
        {...tableProps}

        onChange={(pagination) => {
          // setPage(pagination.current);
        }}
      // pagination={{ total, current: page, pageSize: 5, simple: true }}
      />

    </AppContainer>)
}
export default App